<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}/static/lib/layui/css/layui.css">
</head>
<body>
	<div class="demoTable">
	    姓名：
	  <div class="layui-inline">
		  <input class="layui-input" id="searchName" />
	  </div>
	    手机号：
	  <div class="layui-inline">
		  <input class="layui-input" id="searchPhone" />
	  </div>
	  <button class="layui-btn" data-type="search">搜索</button>
	  <button class="layui-btn" data-type="deleteAll">批量删除</button>
	  <button class="layui-btn" data-type="add">添加</button>
	  <button class="layui-btn" data-type="exportExcel">导出Excel</button>
	</div>
	<table id="tableId" lay-filter="tableFilter"></table>

	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="gradeUp">升级</a>
  		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="recharge">充值</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="statusTpl">
		 {{#  if(d.status == 1){  }}
		 	           上架
		 {{#  } else {            }}
				  下架
		 {{#  }					  }}
	</script>
	<script type="text/html" id="mainImageTpl">
		 <img src="{{d.fullUrl}}"/>
	</script>

	<script src="${path}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${path}/static/lib/layui/layui.js"></script>
	<script src="${path}/static/common/mylayer.js"></script>
	<script src="${path}/static/common/util.js"></script>
	<script>
		layui.use(['table','laydate'], function() {
			var table = layui.table;
			var laydate = layui.laydate;
			
			//执行一个laydate实例
			laydate.render({
			   elem: '#searchTime' //指定元素
			});
			
			table.render({
			    elem: '#tableId'
			    ,url: '${path}/user/selectByPage' //数据接口
			    ,page: true //开启分页
			    ,id : "layUITableId" //设定容器唯一ID，id值是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引
			    ,cols: [[ //表头
			      {type: 'checkbox', fixed: 'left'}
			      ,{field: 'uid', title: 'ID', sort: true, fixed: 'left',width:70}
			      ,{field: 'name', title: '用户名', sort: true, fixed: 'left'}
			      ,{field: 'phone', title: '电话', sort: true, fixed: 'left'}
			      ,{field: 'grade', title: '等级', sort: true,templet: "#gradeTpl", fixed: 'left'}
			      ,{field: 'superiorName', title: '推荐人姓名', sort: true, fixed: 'left'}
			      ,{field: 'superiorPhone', title: '推荐人手机号', sort: true, fixed: 'left'}
			      ,{field: 'money', title: '余额', sort: true}
			      ,{field: 'vouchers', title: '积分', sort: true}
			      ,{fixed:'right', width: 248, toolbar:'#barDemo'}
			    ]]
			  });
			
		  //监听工具条
		  //tool是工具条事件名，tableFilter是table容器属性lay-filter="tableFilter"对应的值
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;//获得当前行数据,json格式对象
		    var layEvent = obj.event;//获得lay-event对应的值
		    if(layEvent === 'gradeUp'){
				layer.confirm(data.name + ' 当前等级为' + data.grade +' 是否确定升级？ ', function(index){
					$.ajax({
						url:"${path}/user/gradeUp",
						data:{"uid":data.uid,
							"grade":data.grade
						},
						dataType:"json",
						success:function(resp) {
							if (resp.code == util.SUCCESS) {
								mylayer.success(resp.msg);
								table.reload("layUITableId");
							} else {
								mylayer.errorMsg(resp.msg);
							}
							layer.close(index);
						}
					});
				});
		    } else if(layEvent === 'del'){
				layer.confirm('真的删除行么', function(index){
					$.ajax({
						url:"${path}/user/deleteById",
						data:{"uid":data.uid},
						dataType:"json",
						success:function(resp) {
							if (resp.code == util.SUCCESS) {
								mylayer.success(resp.msg);
								table.reload("layUITableId");
							} else {
								mylayer.errorMsg(resp.msg);
							}
							layer.close(index);
						}
					});
				});
		    } else if(obj.event === 'edit'){
		        console.log(data);
				layer.open({
					type : 2,
					tile : "修改",
					area : ["1000px", "650px"],
					content : "${path}/user/getUpdatePage?userId="+data.uid+""
				});

		    } else if(obj.event === 'recharge'){
				layer.open({
					type : 2,
					tile : "充值",
					area : ["400px", "230px"],
					content : "${path}/user/getRechargePage?userId="+data.uid+""
				});
			}
		  });
		  
		  var active = {
		    deleteAll: function(){ //获取选中数据
		       var checkStatus = table.checkStatus('layUITableId')
		       var data = checkStatus.data;
		       console.log(data);//选中行的数据
		       console.log(checkStatus.data.length);//获取选中行的数量
		       console.log(checkStatus.isAll);//表格是否全选
		       var ids = util.getSelectedIds(data);
		       console.log(ids);
		       layer.confirm('真的删除行么', function(index){
			    	$.ajax({
			    		url:"${path}/user/deleteAll",
			    		data:{"ids":ids},
			    		dataType:"json",
			    		success:function(resp) {
			    			if(resp.code == util.SUCCESS){
			    				mylayer.success(resp.msg);
			    				table.reload("layUITableId");
			    			} else {
			    				mylayer.errorMsg(resp.msg);
			    			}
				        layer.close(index);
			    		}
			    	});
			   });
		    },
		    //搜索
			search : function() {
				table.reload('layUITableId', {
				  where: { //设定异步数据接口的额外参数，任意设
					  name:$("#searchName").val(),
                      phone:$("#searchPhone").val(),
				  }
				  ,page: {
				    curr: 1 //重新从第 1 页开始
				  }
				});
			},
			//添加
			  add : function() {
				  location.href = "${path}/user/getUserAddPage";
			  },
			  // 导出Excel
			  exportExcel : function() {
				  location.href = "${path}/user/exportExcel";
			  }
		  };
		  
		  $('.demoTable .layui-btn').on('click', function(){
			   var type = $(this).data('type');
			   active[type] ? active[type].call(this) : '';
		   });
		});
	</script>

	<script type="text/html" id="gradeTpl">
		{{#		if(d.grade == 0) {				}}
		普通会员
		{{#	    } else if (d.grade == 1) {     }}
		一级服务商
		{{#	    } else if (d.grade == 2) {     }}
		二级服务商
		{{#	    } else if (d.grade == 3) {     }}
		三级服务商
		{{#	    } else if (d.grade == 4) {     }}
		四级服务商
		{{#	    } else if (d.grade == 5) {     }}
		五级服务商
		{{#	    } else {		}}
		砸场子的
		{{#     }								}}
	</script>

</body>
</html>